<template>
    <div id="registr">
        <head-top>
            <h1 slot="title" >注册</h1>
        </head-top>
        <div class="container">
            <el-form :model="registrForm" :rules="registrRules" ref="registrForm"  class="form-login block form-horizontal">
                <el-form-item label="用户名" prop="username" class="item form-item clearfix" groupClass="form-item-group fl">
                    <div slot="label" class="form-item-label fl">
                        <label >用户名:</label>
                    </div>
                    <el-input slot="group" class="form-item-control" childClass="input" v-model="registrForm.username"></el-input>
                </el-form-item>
                <el-form-item  prop="mobile" class="item form-item clearfix" groupClass="form-item-group fl">
                    <div slot="label" class="form-item-label fl">
                        <label >手机号码:</label>
                    </div>
                    <el-input slot="group" class="form-item-control" childClass="input" v-model="registrForm.mobile"></el-input>
                </el-form-item>
                <el-form-item  prop="code" class="item form-item clearfix" groupClass="form-item-group fl" >
                    <div slot="label" class="form-item-label fl">
                        <label >验证码:</label>
                    </div>
                    <el-input slot="group" class="form-item-control" childClass="input auth-code" v-model="registrForm.code">
                        <div slot="append" class="btn btn-code">获取验证码</div>
                    </el-input>
                </el-form-item>
                <el-form-item  prop="password" class="item form-item clearfix" groupClass="form-item-group fl">
                    <div slot="label" class="form-item-label fl">
                        <label >密码:</label>
                    </div>
                    <el-input slot="group" type="password" class="form-item-control" childClass="input" v-model="registrForm.password"></el-input>
                </el-form-item>
                <el-form-item  prop="password2" class="item form-item clearfix" groupClass="form-item-group fl">
                    <div slot="label" class="form-item-label fl">
                        <label >确认密码:</label>
                    </div>
                    <el-input slot="group" type="password" class="form-item-control" childClass="input" v-model="registrForm.password2"></el-input>
                </el-form-item>

            </el-form>
            <div class="btn btn-registr " @click="submitForm('registrForm')">立即创建</div>
        </div>
        <foot-menu></foot-menu>
    </div>
</template>

<script>
    import headTop from '../../components/header/headTop'
    import footMenu from '../../components/footer/footMenu.vue'
    import ElForm from '../../plugIn/form/src/form.vue'
    import ElFormItem from '../../plugIn/form/src/form-item.vue'
    import ElInput from '../../plugIn/input/src/input.vue'
    import axios  from  "../../lib/networkAxios";
    import {getRegExp}  from  "../../lib/RegExps";

    import {mapActions,mapGetters} from "vuex";
    export default {
        data() {
            console.log(":data")
           let checkUsername=(rule, value, callback)=>{
               axios.post(`${__SERVER_HOST__}/AdminApi/CheckUsername`,{
                   username:value
               }).then(()=>{
                   callback();
               }).catch(res=>{
                   console.log(res)
                   return callback(new Error(res.msg));
               })
            };
            let validatePass = (rule, value, callback) => {
                if (this.registrForm.checkPass !== '') {
                    this.$refs.registrForm.validateField('password2');
                }
                callback();
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.registrForm.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                registrForm: {
                    username:"",
                    mobile:"",
                    code:"",
                    password:"",
                    password2:""
                },
                registrRules: {
                    username: [
                        { required: true, message: '用户名不能为空' },
                        {validator: checkUsername, trigger:'blur'}
                    ],
                    mobile: [
                        { required: true, message: '手机号码不能为空' },
                        { message: '请输入正确的手机号码',pattern:getRegExp("mobile") }
                    ],
                    code: [
                        { required: true, message: '验证码不能为空' }
                    ],
                    password: [
                        { required: true, message: '密码不能为空' },
                        { validator: validatePass }
                    ],
                    password2: [
                        { required: true, message: '确认密码不能为空' },
                        { validator: validatePass2 }
                    ]
                }
            };
        },
        components: {
            headTop,
            footMenu,
            ElForm,
            ElFormItem,
            ElInput
        },
        methods: {
            ...mapActions([
                "registrPostDispatch"
            ]),
            submitForm(formName) {
                this.$refs[formName].validate((valid,a) => {
                    console.log(valid)
                    console.log(a)
                    if (valid) {
                        console.log('submit!');
                        this.registrPostDispatch({
                                username:this.username,
                                nickname:"呵呵",
                                password:this.password,
                                phone:this.mobile
                        })
                    } else {
                        return false;
                    }
                });
            }
        }
    }
</script>
<style lang="scss">

    .form-login{
        margin-top:3rem;
        padding:0.5rem 0;

        .auth-code{
            width: 65%;
        }
    .btn-code{
        background-color: #1db208;
        color: #ffffff;
        border-radius: 0.2rem;
    }
    .form-item{
        padding:0.5rem 0.5rem 0.5rem 0;
        border-bottom: none;
        .form-item-label{
            text-align: right;
            box-sizing: border-box;
            padding-right:0.3rem;
            label{
                font-weight: bold;
            }
        }
        .form-item-control-group{
            width: 75%;
        }
    }

    }
    .btn-registr{
        display: block;
        background-color: #6bd968;
        color: #ffffff;
        text-align: center;
        line-height: 1.5rem;
        font-size: 0.8rem;
        margin: 1rem 1rem 0.6rem;
    }


</style>